<template>
  <div>
    <h3>父组件</h3>
    <template v-if="1===1">
      <div>12323 </div>
      <div>12323 </div>
      <div>12323 </div>
    </template>
    <!-- 以前我们只能通过props 想子组件里面传递数据 -->
    <!-- 如果需要想子组件里面传递 html结构，是通过插槽的形式 -->
    <!-- 我们可以在组件使用的地方， 传递我们需要的html结构 -->
    <child-com value="123" aa="455">
      <!-- <template>
        <button slot="foot">我是在父组件里面写的button</button>
        <h3 slot="top">我是在父组件里面写的htlm结构</h3>
      </template> -->
      <!-- 作用域插槽的本质，是在父组件里面使用子组件的数据 -->
      <!-- <div slot-scope="aaa">父组件通过插槽传递数据进入到子组件 {{ aaa }}</div> -->
      <!-- v-slot是最新的 vue2.6+ 和 vue3 默认的插槽写法 -->
      <!-- slot-scope <2.6 版本的vue，就是用slot-scope的语法 -->
      <!-- v-bind 简写为 ： v-on 简写为@  v-slot简写为 # -->
      <!-- <template v-slot="aaa">
        <div>父组件通过插槽传递数据进入到子组件 {{ aaa }}</div>
      </template> -->
      <template #default="aaa">
        <div>父组件通过插槽传递数据进入到子组件 {{ aaa }}</div>
      </template>
      <template v-slot:foot="test">
        <div>ssss: {{ test }}</div>
      </template>
      <!-- <template #foot="test1">
        <div>ssss: {{ test1 }}</div>
      </template> -->

    </child-com>
  </div>
</template>

<script>
import ChildCom from './ChildCom.vue'

export default {
  name: '',
  components: {
    ChildCom
  },
  data() {
    return {}
  }
}
</script>
